<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-12 17:33
  PageName：a_practice1_feedback_form.html
  Function：实战案例 - 设计反馈表
  URL：http://localhost:8080/j_form/j7_practice/a_practice1_feedback_form.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计反馈表</title>

    <style type="text/css">
        /* 定义表单整体的宽度以及边框样式等 */
        .feedback {
            width: 398px;
            padding: 1px;
            border: 1px solid #E8E8E8;
            background-color: #FFFFFF;
        }

        /* 定义表单内部的所有元素内补丁、外补丁以及文字的相关样式 */
        .feedback * {
            margin: 0;
            padding: 0;
            font: normal 12px/1.5em "宋体", Verdana, Lucida, Arial, Helvetica, sans-serif;
        }

        /* 定义表单标题的高度、文字样式以及背景颜色等 */
        .feedback h3 {
            height: 24px;
            line-height: 24px;
            font-weight: bold;
            font-size: 13px;
            text-indent: 12px;
            color: #FFFFFF;
            background-color: #999999;
        }

        /* 表单内容区域增加10px的左右内补丁，使其与表单外框产生间距 */
        .feedback .content {
            padding: 0 10px;
        }

        /* 定义表单域边框样式以及与上下几个元素之间的间距 */
        .feedback fieldset {
            padding-left: 12px; /* 因为前面已经将表单内部所有内补丁设置为0，所以增加12px的左内补丁使表单域标题缩进 */
            margin-top: 10px;
            border: 0 none;     /* 去除默认的表单域边框 */
            border-top: 1px solid #999999; /* 定义表单域上边框的样式 */
        }

        .feedback legend {
            padding: 0 5px;  /* 设置表单域的标题在表单域上边框中的间距 */
            color: #333333;  /* 考虑IE浏览器解析表单域标题时文字颜色与FF浏览器不同，所以统一定义相同的颜色值 */
        }

        /* 定义表单内容区域中所有输入框的宽度和高度等样式 */
        .feedback .frm_cont {
            margin-top: 8px; /* 表单内容区域中不同表单之间的上下间距 */
        }

        /* 定义label标签的宽度以及右对齐等文字属性，并设置浮动，使其与输入框并列 */
        .feedback label {
            float: left;
            width: 80px;
            height: 22px;
            line-height: 24px;
            text-align: right;
            color: #ABABAB;
            cursor: pointer;
        }

        .feedback .base_info input {
            width: 100px;
            height: 17px;
            padding: 3px 2px 0;
            border: 1px solid #DEDEDE;
        }

        /* 针对email地址输入框，改变其宽度属性值 */
        .feedback .email input {
            width: 150px;
        }

        /* 针对网址输入框，改变其宽度属性值 */
        .feedback .url input {
            width: 240px;
        }

        /* 将提示文本利用内补丁缩进，并设置红色，突出显示 */
        .feedback .tips {
            padding: 5px 0 0 80px;
            color: #FF3260;
        }

        /* 定义文本域的宽高以及内部文字的行高等样式 */
        .feedback textarea {
            width: 240px;
            height: 66px;
            padding-left: 2px;
            line-height: 22px;
            border: 1px solid #DEDEDE;
        }

        /* 按钮区域增加上下内补丁，加大间距，并定义其内部的元素居中显示 */
        .feedback .btns {
            padding: 5px 0;
            text-align: center;
        }

        /* 定义按钮的样式以及按钮中文字的间距等样式 */
        .feedback .btns button {
            height: 22px;
            margin: 0 5px;
            letter-spacing: 3px; /* 调整文字间距 */
            padding-left: 3px;   /* 添加左内补丁使按钮左右间距相等 */
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="feedback">
    <h3>反馈表单</h3>
    <div class="content">
        <form method="post" action="">

            <fieldset class="base_info">
                <legend>用户信息</legend>

                <div class="frm_cont userName">
                    <label for="userName">用户名：</label>
                    <input type="text" value="" id="userName">
                </div>

                <div class="frm_cont email">
                    <label for="email">电子邮件：</label>
                    <input type="text" value="@" id="email">
                </div>

                <div class="frm_cont url">
                    <label for="url">网址：</label>
                    <input type="text" value="http://" id="url">
                </div>
            </fieldset>

            <fieldset class="feedback_content">
                <legend>反馈内容</legend>

                <div class="frm_cont up_file">
                    <label>相关图片：</label>
                    <input type="file">
                    <p class="tips">本系统只支持上传.jpg、.gif、.png图片。</p>
                </div>

                <div class="frm_cont msg">
                    <label for="msg">内容：</label>
                    <textarea rows="4" cols="40" id="msg"></textarea>
                    <p class="tips">请输入留言内容！</p>
                </div>
            </fieldset>

            <div class="btns">
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>